<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>网易云音乐</title>
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
   <link rel="stylesheet" href="./css/songSheet.css">
</head>
<body>
<!-- 头部区域 -->
<div class="songSheet-header">
   <div class="header-T-nav">
       <div class="header-top">
         <h1>
            <a href="../index/index.html">
            </a>
         </h1>
         <ul>
            <li>
               <a href="../index/index.html">
                  <span>发现音乐</span>
                  <em class="cor">&nbsp</em>
               </a>
            </li>
            <li>
               <a href="../mine/mine.html">
                  <span>我的音乐</span>
               </a>
            </li>
            <li>
               <a href="#">
                  <span>关注</span>
               </a>
            </li>
            <li>
               <a href="../Shopping/Shopping.html">
                  <span>商城</span>
               </a>
            </li>
            <li>
               <a href="../musician/musician.html">
                  <span>音乐人</span>
               </a>
            </li>
            <li>
               <a href="../download/download.html">
                  <span>下载客户端</span>
               </a>
            </li>   
            <em></em>   
         </ul>
         <div class="seach">
            <span></span>
            <input type="text" placeholder="音乐/视频/电台/用户">
         </div>
         <a href="../create/create.html" class="framer">创作者中心</a>
         <div class="pic">
            <a href="../user/user.html">
            <img src="./images/user.jpg" alt=""> 
            </a>
            
            
         </div>
       </div>
   </div>
   <div class="header-B-nav">
       <div class="header-btn">
        <ul class="nav">
         <li>
            <a href="#">
               <em class="bgc">推荐</em>
            </a>
         </li>
         <li>
            <a href="#">
               <em>排行榜</em>
            </a>
         </li>
         <li>
            <a href="#">
               <em>歌单</em>
            </a>
         </li>
         <li>
            <a href="#">
               <em>主播电台</em>
            </a>
         </li>
         <li>
            <a href="#">
               <em>歌手</em>
            </a>
         </li>
         <li>
            <a href="#">
               <em>新碟上架</em>
            </a>
         </li>
             
        </ul>
       </div>
   </div>
</div>

<!-- 歌单详情区域 -->
<div class="songSheet-items">
   <!-- 歌单详情左边 -->
   <div class="items-left">
      <div class="left-info">
         <div class="info">
            <div class="info-pic">
               <img src="./images/item-info-pic.jpg" alt="">
               <span></span>
            </div>
         </div>
         <div class="centent">
            <div class="ct-title">
               <i>
                  <span></span>
               </i>
               <div>
                  <h2>请你一定不要停下来 成为你想成为的人</h2> 
               </div>
            </div>
            <div class="ct-user">
               <a href="#" class="user-pic-a">
                  <img src="./images/item-info-user-pic.jpg" class="user-pic">
               </a>
               <span class="name">
                  <a href="#">她的水彩笔</a>
               </span>
               <img style="height:13px;width:13px;display:inline-block;vertical-align:middle;" src="./images/user-pic-2.png" alt="">
               <span class="user-day">2018-11-14 创建</span>
            </div>
            <div class="btns">
               <a href="#" class="play">
                  <i>
                     <em></em>播放
                  </i>
               </a>
               <a href="#" class="add"></a>
               <a href="#" class="common1">
                  <i class="collect">收藏</i>
               </a>
               <a href="#" class="common">
                  <i class="share">分享</i>
               </a>
               <a href="#" class="common">
                  <i class="download">下载</i>
               </a>
               <a href="#" class="common">
                  <i class="comment">评论</i>
               </a>
            </div>
            <div class="tags f-cb">
               <b>标签：</b>
               <a href="#" class="u-tag"><i>华语</i></a>
               <a href="#" class="u-tag"><i>学习</i></a>
            </div>
            <p>
               <b>介绍：</b>    
               我知道你最近很累<br>
               是那种看不见的<br>
               面对未来那种无力感<br>
               但请你一定不要停下来<br>
               因为你的人生不可能就止于此了<br>
               再坚持一下 一切都会慢慢好起来的<br>
            </p>
            <p></p>
         </div>
      </div>
      <div class="songtb">
         <div class="title-list">
            <h3>
               歌曲列表
            </h3>
            <span>58首歌</span>
            <i></i>
            <a href="#">生成外链播放器</a>
            <div>
               播放：
               <strong>3213455</strong>
               次
            </div>
         </div>
      </div>
      <div class="j-flag">
         <table class="m-table">
            <thead>
               <tr>
                  <th class="first w1">
                     <div class="wp">&nbsp;</div>
                 </th>
                 <th>
                  <div class="wp af0">
                     歌曲标题
                  </div>
                 </th>
                 <th class="w2">
                  <div class="wp af1">
                     时长
                  </div>
                 </th>
                 <th class="w3">
                  <div class="wp af2">
                     歌手
                  </div>
                 </th>
                 <th class="w4">
                  <div class="wp af3">
                     专辑
                  </div>
                 </th>
               </tr>
            </thead>
            <tbody>
               <tr class="even">
                  <td class="left">
                     <div class="hd">
                        <span class="ply active" ></span>
                        <span class="num">1</span>
                     </div>
                  </td>
                  <td>
                     <div class="ttc">
                        <span class="txt">
                           <a href="#">
                              <b>追梦赤子心</b>
                           </a>
                           <span> - (2013《快乐男声》主题曲)</span>
                        </span>
                     </div>
                  </td>
                  <td>
                     <a href="#">05:17</a>
                  </td>
                  <td>
                     <a href="#">GALA</a>
                  </td>
                  <td>
                     <a href="#">追梦赤子心</a>
                  </td>
               </tr>
               <tr class="even">
                  <td class="left" style="background-color: #fff;">
                     <div class="hd">
                        <span class="ply"></span>
                        <span class="num">2</span>
                     </div>
                  </td>
                  <td style="background-color: #fff;">
                     <div class="ttc">
                        <span class="txt">
                           <a href="#">
                              <b>夜空中最亮的星</b>
                           </a>
                           <span></span>
                        </span>
                     </div>
                  </td>
                  <td style="background-color: #fff;">
                     <a href="#">04:12</a>
                  </td>
                  <td style="background-color: #fff;">
                     <a href="#">逃跑计划</a>
                  </td>
                  <td style="background-color: #fff;">
                     <a href="#">世界</a>
                  </td>
               </tr>
               <tr class="even">
                  <td class="left">
                     <div class="hd">
                        <span class="ply"></span>
                        <span class="num">3</span>
                     </div>
                  </td>
                  <td>
                     <div class="ttc">
                        <span class="txt">
                           <a href="#">
                              <b>是你想成为的大人吗</b>
                           </a>
                           <span></span>
                        </span>
                     </div>
                  </td>
                  <td>
                     <a href="#">05:31</a>
                  </td>
                  <td>
                     <a href="#">尤长靖</a>
                  </td>
                  <td class="wd">
                     <a href="#">AZORAland</a>
                  </td>
               </tr>
               <tr class="even">
                  <td class="left" style="background-color: #fff;">
                     <div class="hd">
                        <span class="ply"></span>
                        <span class="num">4</span>
                     </div>
                  </td>
                  <td style="background-color: #fff;">
                     <div class="ttc">
                        <span class="txt">
                           <a href="#">
                              <b>烟火里的尘埃</b>
                           </a>
                           <span></span>
                        </span>
                     </div>
                  </td>
                  <td style="background-color: #fff;">
                     <a href="#">05:21</a>
                  </td>
                  <td style="background-color: #fff;">
                     <a href="#">华晨宇</a>
                  </td>
                  <td style="background-color: #fff;">
                     <a href="#">烟火里的尘埃</a>
                  </td>
               </tr>
               <tr class="even">
                  <td class="left">
                     <div class="hd">
                        <span class="ply"></span>
                        <span class="num">5</span>
                     </div>
                  </td>
                  <td>
                     <div class="ttc">
                        <span class="txt">
                           <a href="#">
                              <b>你的答案</b>
                           </a>
                           <span></span>
                        </span>
                     </div>
                  </td>
                  <td>
                     <a href="#">03:39</a>
                  </td>
                  <td>
                     <a href="#">阿抗</a>
                  </td>
                  <td>
                     <a href="#">你的答案</a>
                  </td>
               </tr>
               <tr class="even">
                  <td class="left" style="background-color: #fff;">
                     <div class="hd">
                        <span class="ply"></span>
                        <span class="num">6</span>
                     </div>
                  </td>
                  <td style="background-color: #fff;">
                     <div class="ttc">
                        <span class="txt">
                           <a href="#">
                              <b>我相信</b>
                           </a>
                           <span> - (电视剧《新兵日记》片尾曲)</span>
                        </span>
                     </div>
                  </td>
                  <td style="background-color: #fff;">
                     <a href="#">04:07</a>
                  </td>
                  <td style="background-color: #fff;">
                     <a href="#">杨培安</a>
                  </td>
                  <td style="background-color: #fff;">
                     <a href="#">午夜两点半的我</a>
                  </td>
               </tr>
               <tr class="even">
                  <td class="left">
                     <div class="hd">
                        <span class="ply"></span>
                        <span class="num">7</span>
                     </div>
                  </td>
                  <td>
                     <div class="ttc">
                        <span class="txt">
                           <a href="#">
                              <b>倔强</b>
                           </a>
                           <span></span>
                        </span>
                     </div>
                  </td>
                  <td>
                     <a href="#">04:21</a>
                  </td>
                  <td>
                     <a href="#">五月天</a>
                  </td>
                  <td>
                     <a href="#">神的孩子都在跳舞</a>
                  </td>
               </tr>
               <tr class="even">
                  <td class="left" style="background-color: #fff;">
                     <div class="hd">
                        <span class="ply"></span>
                        <span class="num">8</span>
                     </div>
                  </td>
                  <td style="background-color: #fff;">
                     <div class="ttc">
                        <span class="txt">
                           <a href="#">
                              <b>蓝莲花</b>
                           </a>
                           <span></span>
                        </span>
                     </div>
                  </td>
                  <td style="background-color: #fff;">
                     <a href="#">04:30</a>
                  </td>
                  <td style="background-color: #fff;">
                     <a href="#">许巍</a>
                  </td>
                  <td style="background-color: #fff;">
                     <a href="#">时光.漫步</a>
                  </td>
               </tr>
               <tr class="even">
                  <td class="left">
                     <div class="hd">
                        <span class="ply"></span>
                        <span class="num">9</span>
                     </div>
                  </td>
                  <td>
                     <div class="ttc">
                        <span class="txt">
                           <a href="#">
                              <b>年少有为</b>
                           </a>
                           <span></span>
                        </span>
                     </div>
                  </td>
                  <td>
                     <a href="#">05:17</a>
                  </td>
                  <td>
                     <a href="#">李荣浩</a>
                  </td>
                  <td>
                     <a href="#">耳朵</a>
                  </td>
               </tr>
               <tr class="even">
                  <td class="left" style="background-color: #fff;">
                     <div class="hd">
                        <span class="ply"></span>
                        <span class="num">10</span>
                     </div>
                  </td>
                  <td style="background-color: #fff;">
                     <div class="ttc">
                        <span class="txt">
                           <a href="#">
                              <b>梦开始的原点</b>
                           </a>
                           <span></span>
                        </span>
                     </div>
                  </td>
                  <td style="background-color: #fff;">
                     <a href="#">04:52</a>
                  </td>
                  <td style="background-color: #fff;">
                     <a href="#">薛之谦</a>
                  </td>
                  <td style="background-color: #fff;">
                     <a href="#">深深爱过你</a>
                  </td>
               </tr>
            </tbody>
         </table>
      </div>
      <div class="more">
         <div>查看更多内容，请下载客户端</div>
         <a href="https://music.163.com/#/download">立即下载</a>
      </div>
      <!-- 评论区域 -->
      <div class="n-cmt">
         <div class="u-title">
            <h3>
               <span>评论</span>
            </h3>
            <span class="sub">
               共<span>10653</span>条评论
            </span>
         </div>
         <div class="m-cmmt">
            <div class="iptarea">
               <div class="head">
                  <img src="./images/user-1.jpg" alt="">
               </div>
               <div class="j-flag">
                  <div>
                     <div class="m-cmmtipt f-cb f-pr">
                        <textarea class="u-txt area j-flag"placeholder="评论" maxlength="140"></textarea>
                        <div class="btns f-cb f-pr">
                           <i class="icn u-icn u-icn-36 j-flag" ></i>
                           <i class="icn u-icn u-icn-41 j-flag" ></i>
                           <a href="#" class="btn u-btn u-btn-1 j-flag pinglun" >评论</a>
                           <span class="zs">140</span>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="cmmts">
               <h3 class="u-hd4">精彩评论</h3>
               <div class="comments">
                  <div class="head">
                     <a href="#">
                        <img src="./images/cmmt1jpg.jpg">
                     </a>
                  </div>
                  <div class="cmmt-text">
                     <div class="user-name">
                        <div class="po">
                        <a href="#">她的水彩笔</a>
                        <img src="./images/user-pic-2.png" alt=""  class="xx">
                        <img src="./images/vip.png" alt="" class="vip">
                        </div>
                       <p class="txt"> ：我知道你最近很累 是那种看不见的 面对未来那种无力感 但请你一定不要停下来 因为你的人生不可能就止于此了 再坚持一下 一切都会慢慢好起来的</p>                    
                     </div>
                     <div class="rp">
                        <div class="time">
                           2019年4月3日
                        </div>
                        <div class="zan">
                           <a href="#">
                              <i></i>
                              (18796)
                           </a>
                           <span>|</span>
                           <a href="#">回复</a>
                        </div>
                     </div>
                     
                  
                     
                  </div>
               </div>
               <div class="comments">
                  <div class="head">
                     <a href="#">
                        <img src="./images/info1.jpg">
                     </a>
                  </div>
                  <div class="cmmt-text">
                     <div class="user-name">
                        <div class="po">
                        <a href="#">只因你太美</a>
                        <img src="./images/user-pic-2.png" alt=""  class="xx">
                        <img src="./images/vip.png" alt="" class="vip">
                        </div>
                       <p class="txt"> ：“ 你现在的任务就是认真的学习 充实自己 并不是焦虑时光 你不应该感到度日如年 其实时间过得是真的快 每天都有那天要完成的事情 你在三四月做的事情 在八九月就会有答案 ”</p>                    
                     </div>
                     <div class="rp">
                        <div class="time">
                           2019年4月3日
                        </div>
                        <div class="zan">
                           <a href="#">
                              <i></i>
                              (12134)
                           </a>
                           <span>|</span>
                           <a href="#">回复</a>
                        </div>
                     </div>
                     
                  
                     
                  </div>
               </div>
            </div>

         </div>
         
         
      </div>

   </div>
   <!-- 歌单详情右边 -->
   <div class="items-right">
      <!-- 喜欢这个歌单的人 -->
      <h3>
         <span>喜欢这个歌单的人</span>
      </h3>
      <ul class="like-sing">
         <li>
            <a href="#">
               <img src="" alt="">
            </a>
         </li>
         <li>
            <a href="#">
               <img src="" alt="">
            </a>
         </li>
         <li>
            <a href="#">
               <img src="" alt="">
            </a>
         </li>
         <li>
            <a href="#">
               <img src="" alt="">
            </a>
         </li>
         <li>
            <a href="#">
               <img src="" alt="">
            </a>
         </li>
         <li>
            <a href="#">
               <img src="" alt="">
            </a>
         </li>
         <li>
            <a href="#">
               <img src="" alt="">
            </a>
         </li>
         <li>
            <a href="#">
               <img src="" alt="">
            </a>
         </li>
      </ul>
      <!-- 热门歌单 -->
      <h3>
         <span>热门歌单</span>
      </h3>
      <ul class="hot-sing-list">
         <li>
            <div class="hot-sing-left">
               <a href="#">
                  <img src="./images/info1.jpg" alt="">
               </a>
            </div>
            <div class="hot-sing-right">
               <p class="p-t">
                  <a href="#" class="a-t">EDM·电子音乐 | 制作人百首热单推荐&</a>
               </p>
               <p class="p-b">
                  <span class="span-b">by</span>
                  <a href="#" class="a-b">MIAO喵缪</a>
                  <img src="./images/hot-sing1.png" alt="" class="img-b">
               </p>
            </div>
         </li>
         <li>
            <div class="hot-sing-left">
               <a href="#">
                  <img src="./images/info1.jpg" alt="">
               </a>
            </div>
            <div class="hot-sing-right">
               <p class="p-t">
                  <a href="#" class="a-t">EDM·电子音乐 | 制作人百首热单推荐&</a>
               </p>
               <p class="p-b">
                  <span class="span-b">by</span>
                  <a href="#" class="a-b">MIAO喵缪</a>
                  <img src="./images/hot-sing1.png" alt="" class="img-b">
               </p>
            </div>
         </li>
         <li>
            <div class="hot-sing-left">
               <a href="#">
                  <img src="./images/info1.jpg" alt="">
               </a>
            </div>
            <div class="hot-sing-right">
               <p class="p-t">
                  <a href="#" class="a-t">EDM·电子音乐 | 制作人百首热单推荐&</a>
               </p>
               <p class="p-b">
                  <span class="span-b">by</span>
                  <a href="#" class="a-b">MIAO喵缪</a>
                  <img src="./images/hot-sing1.png" alt="" class="img-b">
               </p>
            </div>
         </li>
         <li>
            <div class="hot-sing-left">
               <a href="#">
                  <img src="./images/info1.jpg" alt="">
               </a>
            </div>
            <div class="hot-sing-right">
               <p class="p-t">
                  <a href="#" class="a-t">EDM·电子音乐 | 制作人百首热单推荐&</a>
               </p>
               <p class="p-b">
                  <span class="span-b">by</span>
                  <a href="#" class="a-b">MIAO喵缪</a>
                  <img src="./images/hot-sing1.png" alt="" class="img-b">
               </p>
            </div>
         </li>
         <li>
            <div class="hot-sing-left">
               <a href="#">
                  <img src="./images/info1.jpg" alt="">
               </a>
            </div>
            <div class="hot-sing-right">
               <p class="p-t">
                  <a href="#" class="a-t">EDM·电子音乐 | 制作人百首热单推荐&</a>
               </p>
               <p class="p-b">
                  <span class="span-b">by</span>
                  <a href="#" class="a-b">MIAO喵缪</a>
                  <img src="./images/hot-sing1.png" alt="" class="img-b">
               </p>
            </div>
         </li>

      </ul>
      <!-- 网易云音乐多端下载 -->
      <div class="multi-down">
         <h3>
            <span>网易云音乐多端下载</span>
         </h3>
         <ul>
            <li>
               <a href="https://apps.apple.com/cn/app/id590338362" class="a-1"></a>
            </li>
            <li><a href="https://music.163.com/api/pc/download/latest" class="a-2"></a></li>
            <li><a href="https://music.163.com/api/android/download/latest2" class="a-3"></a></li>
         </ul>
         <p>同步歌单，随时畅听320k好音乐</p>
      </div>
   </div>  
</div>

<!-- 底部区域 -->
<div class="g-ft">
   <div class="m-ft">
      <div class="f-cd">
         <ul>
            <li>
               <a href="#" class="a1">
                  <span></span>
                  <p>音乐开放平台</p>
               </a>
            </li>
            <li>
               <a href="#" class="a2">
                  <span></span>
                  <p>云村交易所</p>
               </a>
            </li>
            <li>
               <a href="#" class="a3">
                  <span></span>
                  <p>Amped Studio</p>
               </a>
            </li>
            <li>
               <a href="#" class="a4">
                  <span></span>
                  <p>用户认证</p>
               </a>
            </li>
            <li>
               <a href="#" class="a5">
                  <span></span>
                  <p>独立音乐人</p>
               </a>
            </li>
            <li>
               <a href="#" class="a6">
                  <span></span>
                  <p>赞赏</p>
               </a>
            </li>
            <li>
               <a href="#" class="a7">
                  <span></span>
                  <p>视频激励</p>
               </a>
            </li>
         </ul>
      </div>
      <div class="copy">
         <p class="p1">
            <a href="#">服务条款</a><span>|</span>
            <a href="#">隐私政策</a><span>|</span>
            <a href="#">儿童隐私政策</a><span>|</span>
            <a href="#">版权投诉</a><span>|</span>
            <a href="#">投资者关系</a><span>|</span>
            <a href="#">广告合作</a><span>|</span>
            <a href="#">联系我们</a>
         </p>
         <p>
            <a href="#">廉正举报</a>
            <span class="s1">不良信息举报邮箱:51jubao@service.netease.com</span>
            <span>客服热线：95163298</span>
         </p>
         <p>
            <span>互联网宗教信息服务许可证：浙（2022）0000120</span>
            <a href="#">粤B2-20090191-18 工业和信息化部备案管理系统网站</a>
            <span class="logo"><img src="./images/police.png" alt=""></span>
            <a href="#">浙公网安备 33010902002564号</a>
         </p>
         <p>
            <span>网易公司版权所有©1997-2022</span>
            <span>杭州乐读科技有限公司运营：</span>
            <a href="#">浙网文[2021] 1186-054号</a>
         </p>

      </div>
   </div>
   <a href="#" class="top">TOP</a>
</div>


<div class="f-updown">
   <!-- 锁 -->
   <div class="locks">
      <div class="lock">
         <a href="#" class="button"></a>
      </div>
      <div class="lock-right"></div>
   </div>
   <!-- 背景图 -->
   <div class="background"></div>
   <div class="hand"></div>
   <!-- 播放部分 -->
   <div class="f-play-music">
      <div class="btns">
         <a href="#" class="prev"></a>
         <a href="#" class="play"></a>
         <a href="#" class="next"></a>
      </div>
      <div class="def-cover">
         <img src="./images/default_album.jpg" alt="">
         <a href="#"></a>
      </div>
      <div class="play-process">
         <div class="words"></div>
         <!-- 外部容器 -->
         <div class="pbar">
            <!-- 包裹进度条 -->
            <div class="barbg">
               <!-- 进度条 -->
               <div class="ready">
                  <!-- 圆角 -->
                  <div class="curser">
                     <span class="btn"></span>
                  </div>
               </div>
            </div>
            <span class="time">
               <em>00:00</em>
               / 00:00
            </span>

         </div>
      </div>
      <!-- 收藏分享部分 -->
      <div class="operations">
         <a href="#" class="icn icn-pip"></a>
         <a href="#" class="icn icn-add"></a>
         <a href="#" class="icn icn-share"></a>
      </div>
      <div class="controls">
         <!-- 音量控制按键 -->
         <a href="#" class="icn volume"></a>
         <div class="m-vol">
            <div class="barbg"></div>
            <div class="vbg">
               <div class="curr">
                  <span class="btn"></span>
               </div>
            </div>
         </div>
         <!-- 播放方式 -->
         <a href="#" class="icn mode"></a>
         <div class="modetip">随机</div>
         <!-- 播放列表 -->
         <span class="add">
            <a href="#" class="icn list"></a>
         </span>
         <div class="f-playlist">
            <div class="listhd">
               <h4>播放列表（0）</h4>
               <a href="#" class="addall">
                  <span></span>
                  收藏全部
               </a>
               <span class="line"></span>
               <a href="#" class="clear">
                  <span></span>
                  清除
               </a>
               <span class="f-close"></span>
            </div>
            <div class="listbd">
               <div class="listmsk">
                  <div class="msk">
                     <i></i>
                     你还没有添加任何歌曲
                     <br>
                     去首页发现音乐，或在我的音乐收听自己收藏的歌单。
                  </div>
               </div>
               <div class="bline"></div>
               <div class="ask">
                  <a href="#"></a>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>



<script src="./js/songSheet.js"></script>

</body>

</html>